<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../../css/libs/mui.picker.min.css" />
		<link rel="stylesheet" href="../../css/special/imageview.css" />
		<link rel="stylesheet" href="../../css/order/returngoods.css" />
	</head>

	<body>
		<div id="returnGoods" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
				<h1 class="mui-title" v-text="data.status == 2 ? '申请退款':'申请退货'">申请退货</h1>
				<a class="mui-pull-right" @tap="determine">确定</a>
			</header>
			<div class="mui-content">
				<div class="reason">
					<div class="reason_title">退货原因</div>
					<div class="select_reason" id="selectReason">
						<div class="select_reason_text">请选择退货原因</div>
						<div class="mui-icon mui-icon-arrowright"></div>
					</div>
				</div>

				<div class="sever" v-show="data.status !=2">
					<div class="sever_title">退货服务</div>
					<div class="available">
						<div @tap="goodsCheck = false">
							<i :class="{check :!goodsCheck}"></i> 仅退款
						</div>
						<div @tap="goodsCheck = true">
							<i :class="{check :goodsCheck}"></i> 退货退款
						</div>
					</div>
				</div>

				<div class="money">
					<div class="money_title">退款金额</div>
					<div class="money_main">
						<div>金额：</div>
						<div><input type="tel" id="money" placeholder="请输入金额" v-model="chiden ? chiden.productTotalAmout :data.actualTotal" /></div>
					</div>
					<div class="money_main">
						<div>数量：</div>
						<div><input type="tel" id="num" placeholder="请输入数量" v-model="chiden ? chiden.basketCount :data.productNums" :class="{pointer:data.status ==2 || !goodsCheck}" /></div>
					</div>
				</div>
				<div class="describe">
					<div class="describe_title">问题描述</div>
					<div class="describe_input">
						<textarea name="" rows="6" cols="" placeholder="请输入退货问题描述"></textarea>
					</div>
				</div>
				<div class="voucher">
					<div class="voucher_title">上传凭证（最多3张）</div>
					<div class="voucher_main">
						<div class="phosGrid" v-for="photos in photos" :style="{backgroundImage : 'url(' + photos + ')'}">
							<img class="coverImg" :src='photos' v-bind:data-preview-src="photos" data-preview-group="1" />
						</div>
						<div class="add" v-show="photos.length<3"></div>
					</div>
				</div>
				<!--<div class="contact">
					<div class="contact_title">联系方式</div>
					<div class="contact_user">
						<div>联系人：</div>
						<div><input type="text" placeholder="请输入联系人名称" /></div>
					</div>
					<div class="contact_phone">
						<div>联系电话：</div>
						<div><input type="number" placeholder="请输入联系电话" /></div>
					</div>
				</div>-->
			</div>
			<div class="select alert">
				<div>立即拍照</div>
				<div>从相册选择</div>
				<div>取消</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/mui.picker.min.js"></script>
		<script src="../../js/libs/mui.poppicker.js"></script>
		<script src="../../js/libs/zepto.js"></script>
		<script src="../../js/libs/mui.zoom.js"></script>
		<script src="../../js/libs/mui.previewimage_cjh.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/common.js"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack:true
			})
			mui.previewImage();
			var imgTrash = document.getElementsByClassName('img_trash')[0];

			var returnGoods = new Vue({
				el: '#returnGoods',
				data: {
					photos: [],
					filesZip: [],
					data: '',
					chiden: '',
					//false退款，true退货退款
					goodsCheck: false,
				},
				methods: {
					determine: function() {
						if($(".select_reason_text").text() == '请选择退货原因') {
							common.toast('请选择退货原因')
							return
						}
						//是否完成订单2未完成
						var wt = plus.nativeUI.showWaiting();
						if(returnGoods.data.status == 2) {
							if($('#money').val() <= 0 || $('#money').val() == '') {
								common.toast('请输入退款金额')
								wt.close();
								return
							}
							var task = plus.uploader.createUpload(common.urls + "/userRefundReturn/refund/saveApp", {
									method: "POST"
								},
								function(t, status) { //上传完成
									if(status == 200) {

										if(JSON.parse(t.responseText).code == 1) {
											wt.close();
											var list = plus.webview.getWebviewById('../my/order.html')
											mui.fire(list, 'order');
											mui.back()
											common.toast('退款成功')
										} else {
											wt.close();
											if(JSON.parse(t.responseText).resultMsg) {
												common.toast(JSON.parse(t.responseText).resultMsg)
											}
										}

									} else {
										console.log("上传失败：" + status);
										wt.close();
									}
								});

							task.addData("orderId", returnGoods.data.subId.toString());
							task.addData("buyerMessage", $(".select_reason_text").text());
							task.addData("reasonInfo", $(".describe_input textarea").val());
							task.addData("refundAmount", $('#money').val());
							task.setRequestHeader('auth', "YL " + common.data.token);
							task.addData("subNumber", returnGoods.data.subNum);
							for(var i = 0; i < returnGoods.filesZip.length; i++) {
								var f = returnGoods.filesZip[i];
								task.addFile(f.path, {
									key: f.name,
									mime: 'form-data'
								});
							}
							task.start();
						} else {
							if($('#money').val() <= 0 || $('#money').val() == '') {
								common.toast('请输入退款金额')
								wt.close();
								return
							} else if($('#num').val() <= 0 && returnGoods.goodsCheck) {
								common.toast('请输入退款数量')
								wt.close();
								return
							}
							var urls = returnGoods.goodsCheck ? '/userRefundReturn/itemReturn/saveApp' : '/userRefundReturn/itemRefund/saveApp'

							var task = plus.uploader.createUpload(common.urls + urls, {
									method: "POST"
								},
								function(t, status) { //上传完成
									if(status == 200) {
										if(JSON.parse(t.responseText).code == 1) {
											wt.close();
											mui.back()
											common.toast('退货成功')
											if(plus.webview.getWebviewById('../my/service.html')) {
												plus.webview.getWebviewById('../my/service.html').reload()
											}
										} else {
											wt.close();
											if(JSON.parse(t.responseText).resultMsg) {
												common.toast(JSON.parse(t.responseText).resultMsg)
											}
										}

									} else {
										//										common.toast()
										console.log(JSON.stringify(t))
										console.log("上传失败：" + status);
										wt.close();
									}
								});
							task.addData("orderId", returnGoods.data.subId.toString());
							task.addData("buyerMessage", $(".select_reason_text").text());
							task.addData("reasonInfo", $(".describe_input textarea").val());
							task.addData("refundAmount", $('#money').val());
							task.addData("orderItemId", returnGoods.chiden.subItemId.toString());
							task.addData("subNumber", returnGoods.data.subNum);
							if(returnGoods.goodsCheck) {
								task.addData("goodsNum", returnGoods.chiden.basketCount);
							}

							task.setRequestHeader('auth', "YL " + common.data.token);
							for(var i = 0; i < returnGoods.filesZip.length; i++) {
								var f = returnGoods.filesZip[i];
								task.addFile(f.path, {
									key: f.name,
									mime: 'form-data'
								});
							}
							task.start();

						}
					}
				},
				watch: {
					photos: function(news, old) {
						this.filesZip = []
						for(var i = 0; i < news.length; i++) {
							compressImage(news[i], i)
						}

					}
				}
			})

			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				returnGoods.data = self.parameter.parent;

				returnGoods.chiden = self.parameter.chiden
				console.log(returnGoods.chiden)

			})

			//普通示例
			var userPicker = new mui.PopPicker();
			userPicker.setData([{
				value: 'zl',
				text: '质量问题'
			}, {
				value: 'pj',
				text: '配件问题'
			}, {
				value: 'lf',
				text: '少件/漏发'
			}, {
				value: 'bf',
				text: '与商品描述不符'
			}, {
				value: 'bz',
				text: '包装/商品残破'
			}, {
				value: 'fp',
				text: '发票问题'
			}, {
				value: 'qt',
				text: '其他'
			}]);
			var showUserPickerButton = document.getElementById('selectReason');
			showUserPickerButton.addEventListener('tap', function(event) {
				userPicker.show(function(items) {
					$(".select_reason_text").text(items[0].text)
					$(".select_reason_text").css('color', '#333')
				});
			}, false);

			//现在图片
			var mask = mui.createMask(hide); //callback为用户点击蒙版时自动执行的回调；
			$(".add").on('tap', function() {
				$('.select').removeClass('alert')
				mask.show()
			})

			$(".select div").on('tap', function() {
				if($(this).index() == 0) {
					getImage()
				} else if($(this).index() == 1) {
					galleryImg()
				} else {
					$('.select').addClass('alert')
				}
				mask.close()
			})

			function hide() {
				$('.select').addClass('alert')
			}

			function getImage() {
				var c = plus.camera.getCamera();
				c.captureImage(function(e) {
					plus.io.resolveLocalFileSystemURL(e, function(entry) {
						var s = [entry.toLocalURL() + "?version=" + new Date().getTime()];
						returnGoods.photos.push(s)
					}, function(e) {
						console.log("读取拍照文件错误：" + e.message);
					});
				}, function(s) {
					console.log(JSON.stringify(s))
					//					common.toast('')
				}, {
					filename: "_doc/head.jpg"
				})
			}

			function galleryImg() {
				// 从相册中选择图片
				plus.gallery.pick(function(e) {
					returnGoods.photos = returnGoods.photos.concat(e.files)
				}, function(e) {
					common.toast('取消选择图片');
				}, {
					filter: 'image',
					multiple: true,
					maximum: 3 - Number(returnGoods.photos.length),
					system: false,
					onmaxed: function() {
						plus.nativeUI.alert('最多只能选择' + (3 - Number(returnGoods.photos.length)) + '张图片');
					}
				}); // 最多选择9张图片
			};

			//放大删除
			imgTrash.addEventListener('tap', function(event) {
				var selIndex = mui.getProto().lastIndex;
				var opt = mui.getProto();
				opt.removeImage(selIndex, "1");
				returnGoods.photos.splice(selIndex, 1)
			}, false);

			//压缩
			function compressImage(img, index) {
				plus.zip.compressImage({
						src: img,
						dst: img.slice(0, img.length - 4) + "zip" + (img.slice(-4)),
						quality: 100,
						overwrite: true
					},
					function(i) {
						returnGoods.filesZip.push({
							name: "photoFile" + (index + 1),
							path: i.target
						})
					},
					function(e) {
						alert("压缩图片失败: " + JSON.stringify(e));
					});
			}
		</script>
	</body>

</html>